<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-tiles"
	prefix="tiles"%>

<rich:panel header="#{messages['booking.label']}">
	<h:panelGrid>
		<h:outputText value="#{errorBean.errorMessage}" styleClass="error"></h:outputText>
	</h:panelGrid>
	
	<h:panelGrid width="100%">
	    <h:outputText value="#{messages['member.booking.label']}" styleClass="sub_header" />
	</h:panelGrid>
	
	<h:panelGrid columns="4">
		<h:outputLabel for="searchBy" value="#{messages['search.by.label']}" styleClass="standardText_Label" />
		<t:selectOneMenu id="searchBy" styleClass="standardText" value="#{adminMemberBookingBean.searchField}" required="true">
				 <f:selectItems value="#{adminMemberBookingBean.selectSearchList}"/>
		</t:selectOneMenu>
		<t:inputText size="20" maxlength="20" styleClass="standardText" value="#{adminMemberBookingBean.searchKeyword}"></t:inputText>
		<h:commandButton value="#{messages['search']}" action="#{adminMemberBookingBean.searchMemberBookingAction}" 
					actionListener="#{adminMemberBookingBean.searchMemberBookingActionEvent}" styleClass="button">
		</h:commandButton>
	</h:panelGrid>
	
	<h:panelGrid columns="1" width="90%">
		<rich:tabPanel selectedTab="#{adminMemberBookingBean.bookingStatus}"  >
			<rich:tab name="Pending" label="#{messages['member.pending.booking.status.label']}" immediate="true" switchType="server" actionListener="#{adminMemberBookingBean.pendingStatusSelectedActionEvent}" >
				<a4j:support ajaxSingle="true" event="onclick" reRender="data" ></a4j:support>
				
				<h:panelGrid width="100%" columns="1">
				    <h:panelGroup>
						<rich:dataTable id="data" var="memberBooking" value="#{adminMemberBookingBean.memberBookingList}" rows="20" width="99%">
							<rich:column style="text-align:center;width:30%;">
								<f:facet name="header">
									<h:outputText value="#{messages['member.booking.no.column']}"></h:outputText>
								</f:facet>
							
								<h:commandLink action="#{adminMemberBookingBean.navEditMemberBookingAction}" actionListener="#{adminMemberBookingBean.navEditMemberBookingActionEvent}">
									<h:outputText value="#{memberBooking.memberBookingNo}"></h:outputText>
								</h:commandLink>
								<f:param id="memberBookingId" value="#{memberBooking.memberBookingId}" />
							</rich:column>
							
							<rich:column style="text-align:center;width:30%;">
								<f:facet name="header">
									<h:outputText value="#{messages['member.booking.date.column']}"></h:outputText>
								</f:facet>
								<h:outputText value="#{memberBooking.memberBookingDate}">
									<f:convertDateTime pattern="dd/MM/yyyy" timeZone="Asia/Kuala_Lumpur"/>
								</h:outputText>
							</rich:column>
							
							<rich:column style="text-align:center;width:30%;">
								<f:facet name="header">
									<h:outputText value="#{messages['member.booking.status.column']}"></h:outputText>
								</f:facet>
							    <h:outputText value="#{memberBooking.status}"></h:outputText>
							</rich:column>	
						</rich:dataTable>
					</h:panelGroup>
					
					<rich:datascroller align="left"  for="data" maxPages="20" />
					
					<t:panelGrid columns="2" columnClasses="standardTable_ColumnLeft_20,standardTable_ColumnLeft_80" width="100%">
						<h:outputText></h:outputText>
						<h:commandButton value="#{messages['new.member.booking.button']}" action="#{adminMemberBookingBean.navAddMemberBookingAction}" 
								actionListener="#{adminMemberBookingBean.navAddMemberBookingActionEvent}" styleClass="button">
						</h:commandButton>
					</t:panelGrid>
				</h:panelGrid>
				
	        </rich:tab>
	        <rich:tab name="Confirmed" label="#{messages['member.confirmed.booking.status.label']}" immediate="true" switchType="server" actionListener="#{adminMemberBookingBean.confirmedStatusSelectedActionEvent}">
				<a4j:support ajaxSingle="true" event="onclick" reRender="dataConfirmed" ></a4j:support>
				
				
				<h:panelGrid width="100%" columns="1">
				    <h:panelGroup>
						<rich:dataTable id="dataConfirmed" var="memberBooking" value="#{adminMemberBookingBean.memberBookingList}" rows="20" width="99%">
							<rich:column style="text-align:center;width:20%;">
								<f:facet name="header">
									<h:outputText value="#{messages['member.booking.no.column']}"></h:outputText>
								</f:facet>
							
								<h:commandLink action="#{adminMemberBookingBean.navEditMemberBookingAction}" actionListener="#{adminMemberBookingBean.navEditMemberBookingActionEvent}">
									<h:outputText value="#{memberBooking.memberBookingNo}"></h:outputText>
								</h:commandLink>
								<f:param id="memberBookingId" value="#{memberBooking.memberBookingId}" />
							</rich:column>
							
							<rich:column style="text-align:center;width:20%;">
								<f:facet name="header">
									<h:outputText value="#{messages['member.booking.date.column']}"></h:outputText>
								</f:facet>
								<h:outputText value="#{memberBooking.memberBookingDate}">
									<f:convertDateTime pattern="dd/MM/yyyy" timeZone="Asia/Kuala_Lumpur"/>
								</h:outputText>
							</rich:column>
							
							
							<rich:column style="text-align:center;width:20%;">
								<f:facet name="header">
									<h:outputText value="#{messages['member.booking.confirmation.no.column']}"></h:outputText>
								</f:facet>
								<h:outputText value="#{memberBooking.confirmationNo}"></h:outputText>
							</rich:column>
							
							<rich:column style="text-align:center;width:20%;">
								<f:facet name="header">
									<h:outputText value="#{messages['member.booking.confirmation.date.column']}"></h:outputText>
								</f:facet>
								<h:outputText value="#{memberBooking.confirmationDate}">
									<f:convertDateTime pattern="dd/MM/yyyy" timeZone="Asia/Kuala_Lumpur"/>
								</h:outputText>
							</rich:column>
							
							<rich:column style="text-align:center;width:20%;">
								<f:facet name="header">
									<h:outputText value="#{messages['member.booking.status.column']}"></h:outputText>
								</f:facet>
							    <h:outputText value="#{memberBooking.status}"></h:outputText>
							</rich:column>	
						</rich:dataTable>
					</h:panelGroup>
					
					<rich:datascroller align="left"  for="dataConfirmed" maxPages="20"  />
					
					
				</h:panelGrid>
	        </rich:tab>
	        <rich:tab name="Cancelled" label="#{messages['member.cancelled.booking.status.label']}" immediate="true" switchType="server" actionListener="#{adminMemberBookingBean.cancelledStatusSelectedActionEvent}" >
				<a4j:support ajaxSingle="true" event="onclick" reRender="dataCancelled" ></a4j:support>
				
				<h:panelGrid width="100%" columns="1">
				    <h:panelGroup>
						<rich:dataTable id="dataCancelled" var="memberBooking" value="#{adminMemberBookingBean.memberBookingList}" rows="20" width="99%">
							<rich:column style="text-align:center;width:30%;">
								<f:facet name="header">
									<h:outputText value="#{messages['member.booking.no.column']}"></h:outputText>
								</f:facet>
							
								<h:commandLink action="#{adminMemberBookingBean.navEditMemberBookingAction}" actionListener="#{adminMemberBookingBean.navEditMemberBookingActionEvent}">
									<h:outputText value="#{memberBooking.memberBookingNo}"></h:outputText>
								</h:commandLink>
								<f:param id="memberBookingId" value="#{memberBooking.memberBookingId}" />
							</rich:column>
							
							<rich:column style="text-align:center;width:30%;">
								<f:facet name="header">
									<h:outputText value="#{messages['member.booking.date.column']}"></h:outputText>
								</f:facet>
								<h:outputText value="#{memberBooking.memberBookingDate}">
									<f:convertDateTime pattern="dd/MM/yyyy" timeZone="Asia/Kuala_Lumpur"/>
								</h:outputText>
							</rich:column>
							
							<rich:column style="text-align:center;width:30%;">
								<f:facet name="header">
									<h:outputText value="#{messages['member.booking.status.column']}"></h:outputText>
								</f:facet>
							    <h:outputText value="#{memberBooking.status}"></h:outputText>
							</rich:column>	
						</rich:dataTable>
					</h:panelGroup>
					
					<rich:datascroller align="left"  for="dataCancelled" maxPages="20"  />
					
					
				</h:panelGrid>
	        </rich:tab>
		</rich:tabPanel>
	</h:panelGrid>
	
	
	
</rich:panel>	